<template>
  <div class="salesDetails">
    <section>
      <div class="top lcenter">
        <p class="statusName">{{ changeOrderStatus(receptData.status) }}</p>
        <p class="statusTime">{{ receptData.finish_time }}</p>
      </div>
    </section>

    <section>
      <div class="refoundCenter">
        <p class="refoundTitle">退款信息</p>
        <div
          class="orderItem"
          v-for="(child, index) in receptData.list"
          :key="index"
        >
          <orderCard :options="child" :is-details="true" @show="showFn">
          </orderCard>
        </div>
        <div class="refoundInfo">
          <div class="refoundLine jscenter">
            <p class="infoTitle">退款原因：</p>
            <p class="infoContent">{{ receptData.user_remark }}</p>
          </div>
          <div class="refoundLine jscenter">
            <p class="infoTitle">退款金额：</p>
            <p class="infoContent">¥{{ receptData.total_refund_price }}</p>
          </div>
          <div class="refoundLine jscenter">
            <p class="infoTitle">退款说明：</p>
            <p class="infoContent">{{ receptData.organizer_remark }}</p>
          </div>
        </div>
        <div class="refoundPeople">
          <div class="refoundLine jscenter">
            <p class="infoTitle">申请人：</p>
            <p class="infoContent">{{ receptData.nickname }}</p>
          </div>
          <div class="refoundLine jscenter">
            <p class="infoTitle">申时间：</p>
            <p class="infoContent">{{ receptData.create_time }}</p>
          </div>
        </div>
      </div>
    </section>

    <my-image-preview ref="myImagePreviewRef"></my-image-preview>
  </div>
</template>

<script setup lang="ts">
import orderCard from "@/components/orderCard/index.vue";
import myImagePreview from "@/components/imagePreview/index.vue";
import { ref } from "vue";
import { afterSalesDetailsApi } from "@/api/aslesDetails/index";
import { useRoute } from "vue-router";
import { isRes, changeOrderStatus } from "@/utils/pub-use";
const myImagePreviewRef = ref<InstanceType<typeof myImagePreview>>();
const route = useRoute();
const showFn = (url: string) => {
  myImagePreviewRef.value?.showFn(url);
};
//-----------------------------------------------获取数据-----------------------------------------------
let receptData: any = ref({});
const getList = async () => {
  let res = await afterSalesDetailsApi({ order_id: route.query.order_id });
  if (isRes(res)) {
    receptData.value = res.result;
  }
};
getList();
</script>

<style lang="scss" scoped>
.salesDetails {
  background: #f8f9fa;
  padding: 0 20px;
  section {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 20px;
    .top {
      height: 198px;
      .statusName {
        font-weight: 500;
        color: #f55726;
        font-size: 40px;
      }
      .statusTime {
        margin-top: 15px;
        font-size: 24px;
        color: #999999;
      }
    }
    .refoundCenter {
      padding: 30px 20px;
      .refoundTitle {
        color: #000000;
        font-size: 28px;
      }
    }
    .refoundInfo {
      margin-top: 10px;
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
    }

    .refoundLine {
      margin-top: 20px;
      .infoTitle {
        word-break: keep-all;
        color: #333333;
        font-size: 26px;
      }
      .infoContent {
        color: #999999;
        font-size: 26px;
      }
    }
  }
}
</style>
